<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML/SVG Example</title>
</head>

<body>
  <!-- <button id="a" >A</button>
  <button id="b">B</button>
  <button id="c">C</button>
  <div id="cont"></div> -->

  <button id="a">A</button>
  <button id="b">B</button>
  <button id="c">C</button>

  <button id="d">D</button>
  <button id="e">E</button>
  <button id="f">F</button>


  <div id="contABC"></div>
  <div id="contDEF"></div>

</body>
</html>
<!-- <script>
   let body = document.getElementsByTagName('body')[0];
   let cont = document.getElementById('contABC');
   let cont1 = document.getElementById('contDEF');
   body.addEventListener('click',function(e){
    console.log(e.target.id,window.location)
    let id = e.target.id;
    if(e.target.nodeName.toLowerCase() == 'button'){
        let url = window.location.hash.split('/');
       if(id == 'a' || id == 'b' || id == 'c'){
           console.log(window.location.hash.split('/'))
           window.location.hash =  '/' + e.target.innerText + '/' + url[2];
           render(e.target.innerText,1)
       }else{
         window.location.hash =  '/' + url[1] + '/' + e.target.innerText
         render(e.target.innerText,2)
       }
    }
  })
  
  function render(hash,type){
     if(type == 2){
      cont1.innerHTML =  hash
     }else if(type == 1){
      cont.innerHTML =  hash
     }
    
  }
  function init(){
    let url = window.location.hash.split('/');
    let fir = url[1].toLowerCase();
    let sec = url[2].toLowerCase();
    let oneVal = document.getElementById(fir).innerText;
    let twoVal = document.getElementById(sec).innerText;
    cont1.innerHTML =  twoVal;
    cont.innerHTML =  oneVal;
    
  }
  init()
</script> -->
<script>
  let body = document.getElementsByTagName('body')[0];
  let cont = document.getElementById('cont');
  body.addEventListener('click',function(e){
    console.log(e.target.innerText)
    if(e.target.nodeName.toLowerCase() == 'button'){
       window.location.hash = e.target.innerText
    }
  })

  function getHash(){
    console.log(window.location.hash)
    render(window.location.hash)
  }

  function render(hash){
     cont.innerHTML =  hash
  }

  window.addEventListener("hashchange", function(){
    console.log('123')
    render(window.location.hash)
  }, false);
  render(window.location.hash)
</script>